import React, { useState, useEffect } from "react";
import { useParams, NavLink } from "react-router-dom";
import { getAuthorDetail } from "../../../components/api";
import style from "./authorDetail.module.css";
import { UpOutline, DownOutline } from "antd-mobile-icons";
import Back from "../back";
const { authorHead, authorWrap, authorCon } = style;

interface IDe {
  id?: number;
  name?: string;
  introduce?: string;
  works?: IWorks;
  [propName: string]: any;
}

interface IWorks {
  book_id: number;
  book_img: string;
  book_name: string;
}

export default function AuthorDetail() {
  let { id }: any = useParams();

  const [readMore, setReadMore] = useState(false);
  // console.log(id)

  // interface IAuthor{

  // }

  let [authorDe, setAuthorDe] = useState<IDe>({});
  let [works, setWorks] = useState([]);

  const getAuthor_detail = async () => {
    let res = await getAuthorDetail(id);
    // console.log(res, "authorDe")
    setAuthorDe(res.data[0]);
    setWorks(res.data[0].works);
    // console.log(works)
  };

  useEffect(() => {
    getAuthor_detail();
  }, []);

  return (
    <div>
      <div
        style={{
          height: 150,
          backgroundColor: "brown",
          padding: 10,
          color: "#fff",
          //   position: "relative",
        }}
      >
        <Back></Back>
      </div>
      <div className={authorWrap}>
        <div className={authorHead}>
          <img src={authorDe.avatar_url} alt="" width="50" />
          <h5>
            {authorDe.name}
            <p>{authorDe.label}</p>
          </h5>
        </div>
        <p>
          {readMore
            ? authorDe.introduce
            : `${authorDe.introduce?.substring(0, 80)}...`}
        </p>
        <i onClick={() => setReadMore(!readMore)}>
          {readMore ? <UpOutline /> : <DownOutline />}
        </i>
      </div>
      <div className={authorCon}>
        <h2>
          TA的作品
          <span>共{works.length}本书</span>
        </h2>
        <ul>
          {works.map((item: any) => (
            <NavLink to={"/bookdetail/" + item.book_id}>
              <li>
                <img src={item.book_img} alt="" />
                <p>{item.book_name}</p>
              </li>
            </NavLink>
          ))}
        </ul>
      </div>
    </div>
  );
}
